import { ref, getCurrentInstance, computed, onMounted, nextTick, watch, provide } from 'vue';
import { propertyRegistered, propertyGroup } from "./propertyRegister";
import type { Designer } from '../../type'
import propEditors from './property-editor/index'
import { isNumber } from '/@/utils/is';

export default function useFormSetting(selectedWidget, props) {

  /**
   * 是否展示折叠面板
   * @param widgetProps 组件的属性 
   * @returns 
   */
  const isShowPanel = (widgetProps) => {
    const configWidgetProps = new Set(Object.keys(widgetProps.props))
    return Object.keys(selectedWidget.value.props).filter(e => configWidgetProps.has(e)).length > 0;
  }

  const hasPropEditor = (propName, editorName) => {
    const designer = props.designer || {} as Designer
    if (!editorName) {
      console.log(propName, ' 对应的编辑器名称为空')
      return false
    }
  
    /* alert组件注册了两个type属性编辑器，跳过第一个type属性编辑器，只显示第二个alert-type属性编辑器！！ */
    if (propName.indexOf('-') <= -1) {
      let uniquePropName = selectedWidget.value.type + '-' + propName
      if (propertyRegistered(uniquePropName)) {
        console.warn('uniquePropName', uniquePropName, ' 已被注册')
        return false
      }
    }
  
    let originalPropName = propName.replace(selectedWidget.value.type + '-', '')  //去掉组件名称前缀-，如果有的话！！

    // 表单属性
    if ('diy-form-setting' === selectedWidget.value.type) {
      return designer.hasFormConfig(originalPropName) && getPropEditor(propName, editorName)
    }

    return designer.hasWidgetConfig(selectedWidget.value, originalPropName) && getPropEditor(propName, editorName)
  }

  /**
   * 查询属性编辑器
   * 
   * 查找顺序
   * 1. 通过 [type-属性名-editor] 查找当前引入的属性编辑器
   * 2. 通过 [type-属性名-editor] 查找全局注册的属性编辑器
   * 3. 通过 [属性名-editor] 查找当前引入的属性编辑器
   * @param propName 属性名
   * @param editorName 编辑器名称
   */
  const getPropEditor = (propName, editorName) => {
    let originalPropName = propName.replace(selectedWidget.value.type + '-', '')  //去掉组件名称前缀-，如果有的话！！
    let ownPropEditorName = `${selectedWidget.value.type}-${originalPropName}-editor`
    // console.log('ownPropEditorName', ownPropEditorName, !!propEditors[ownPropEditorName])

    const ownPropEditor = propEditors[ownPropEditorName]
    if (ownPropEditor) {
      return ownPropEditor
    }

    const appContext = getCurrentInstance()?.appContext;
    // step 先从Vue3全局注册的属性编辑器组件查找
    const editor = appContext?.components[ownPropEditorName] || propEditors[editorName]
    if (!editor) {
      console.warn('未查询到属性编辑器 ', ownPropEditorName, ' | ', editorName)
    }
    return editor
  }


  const updateFormItemConfig = (designer : Designer | undefined) => {
    if (!designer) {
      return
    }
    const globalConfig = designer.globalConfig
    let formLabelCol = (globalConfig.labelCol || {}) as any
    let formLabelStyle = (globalConfig.labelStyle || {}) as any
  
    let labelWidth = formLabelStyle.width
    labelWidth = globalConfig.layoutType === 'vertical' ? '100%' : labelWidth
    let newLabelWidth = isNumber(labelWidth) ? `${labelWidth}px` : labelWidth;
  
    labelWidth = labelWidth ? newLabelWidth : '100%'
  
    const textAlign = designer.globalConfig.layoutType === 'vertical' ? 'left' : formLabelStyle.textAlign
  
    formLabelStyle = { ...formLabelStyle, width: labelWidth, textAlign }
    formLabelCol = {  ...formLabelCol, style: formLabelStyle }
    designer.formItemConfig.labelCol = {  ...formLabelCol, style: formLabelStyle }
    console.log('==> updateFormItemConfig ', designer.formItemConfig)
  }
    
  return {
    isShowPanel,
    hasPropEditor,
    getPropEditor,
    updateFormItemConfig
  }
}